<template>
    <div>
        <div class="row">
            <div class="change-type-div">
                <div class="btn-group" role="group" aria-label="Basic example">
                    <button :class="activeMonth" type="button" v-on:click="drawPieChartMonth()">月</button>
                    <button :class="activeYear" type="button" v-on:click="drawPieChartYear()">年</button>
                </div>
            </div>
            <div id="income" class="col-md-12 graph"></div>
        </div>
        <div class="row">
            <div class="change-type-div">
                <div class="btn-group" role="group" aria-label="Basic example">
                    <button :class="activeHollow" type="button" v-on:click="changeHollow()">空心</button>
                    <button :class="activeSolid" type="button" v-on:click="changeSolid()">实心</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "PieIncome",
        data: function(){
            return {
                chart: null,

                // 年月继承自父页面
                year: null,
                month: null,

                loginUser: null,

                type: 1,
                // 空心1 or 实心2
                hollow: 1,
            }
        },
        mounted() {
            let _this = this;
            _this.$parent.showYear = true;
            _this.$parent.showMonth = true;
            _this.year = _this.$parent.year;
            _this.month = _this.$parent.month;
            if(!_this.year || !_this.month){
                _this.year = new Date().getFullYear();
                _this.month = new Date().getMonth() + 1;
            }
            _this.type = SessionStorage.get(SESSION_KEY_MONTH_YEAR) || null;
            if(_this.type === null){
                _this.type = 1;
            }
            _this.hollow = SessionStorage.get(SESSION_KEY_HOLLOW_SOLID) || null;
            if(_this.hollow === null){
                _this.hollow = 1;
            }
            _this.loginUser = Tool.getLoginUser();
            _this.type === 1 ? _this.drawPieChartMonth() : _this.drawPieChartYear();

        },
        computed:{
            date(){
                const {year,month} = this;
                return {
                    year,
                    month
                }
            },
            activeMonth(){
                return {
                    'btn btn-outline-info active': this.type === 1,
                    'btn btn-outline-info': this.type === 2,
                }
            },
            activeYear(){
                return {
                    'btn btn-outline-info active': this.type === 2,
                    'btn btn-outline-info': this.type === 1,
                }
            },
            activeHollow(){
                return {
                    'btn btn-outline-info active': this.hollow === 1,
                    'btn btn-outline-info': this.hollow === 2,
                }
            },
            activeSolid(){
                return {
                    'btn btn-outline-info active': this.hollow === 2,
                    'btn btn-outline-info': this.hollow === 1,
                }
            },
        },
        watch:{
            date:{
                handler:function () {
                    this.setTitleOption();
                    this.setDataOption();
                }
            }
        },
        methods:{
            drawPieChart(){
                let _this = this;
                SessionStorage.set(SESSION_KEY_MONTH_YEAR,_this.type);
                if(!_this.chart){
                    _this.chart = _this.$echarts.init(document.getElementById('income'), 'shine');
                }
                _this.setDefaultOption();
                _this.chart.showLoading();
                _this.setDataOption();
            },
            drawPieChartMonth(){
                let _this = this;
                _this.$parent.showMonth = true;
                _this.type = 1;
                _this.drawPieChart();
            },

            drawPieChartYear(){
                let _this = this;
                _this.$parent.showMonth = false;
                _this.type = 2;
                _this.drawPieChart();
            },

            setDataOption(){
                let _this = this;
                let url = _this.type === 1 ?
                    process.env.VUE_APP_SERVER+'/business/income/each-income-sum/'+_this.year + '/' + _this.month + '/' + _this.loginUser.id :
                    process.env.VUE_APP_SERVER+'/business/income/each-income-sum/'+_this.year + '/' + _this.loginUser.id;
                _this.$ajax.get(url).then(response=>{
                    let resp = response.data;
                    if(resp.success){
                        let map = resp.content;
                        _this.chart.hideLoading();
                        _this.chart.setOption({
                            series: [{
                                data:[
                                    {value:map.PA,name: INCOME_TYPE.PART_TIME.value},
                                    {value:map.SU,name: INCOME_TYPE.SUBSIDY.value},
                                    {value:map.RE,name: INCOME_TYPE.REWARD.value},
                                    {value:map.OT,name: INCOME_TYPE.OTHERS.value},
                                    {value:map.SA,name: INCOME_TYPE.SALARY.value},
                                ].sort(function (a, b) { return a.value - b.value; })
                            }]
                        })
                    }
                })
            },
            setTitleOption(){
                let _this = this;
                let title = _this.type === 1 ? _this.year + "年"+_this.month+"月收入构成饼状图" :
                    _this.year + "年收入构成饼状图"
                let option = {
                    title:{
                        left: '1%',
                        text: title
                    }
                }
                _this.chart.setOption(option);
            },
            setDefaultOption(){
                let _this = this;
                _this.setTitleOption();

                let option = {
                    tooltip: {
                        trigger: 'item',
                        textStyle: {
                            color: 'lightblue'
                        },
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        top: 30,
                        left: 12,
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },

                    series: [{
                        name: '收入构成',
                        data: [],
                        // radius: ['45%', '70%'],
                        type: 'pie',
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '30',
                                fontWeight: 'bold'
                            },
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                    }]
                };
                _this.setHollow();
                _this.chart.setOption(option);
            },
            setHollow(){
                let _this = this;
                if(_this.hollow === 1){
                    _this.chart.setOption({
                        series: [{
                            radius: ['45%','70%'],
                            type: 'pie',
                            label: {
                                show: false,
                                position: 'center'
                            },
                            labelLine: {
                                show: false
                            },
                        }]
                    })
                }else{
                    _this.chart.setOption({
                        series: [{
                            radius: '70%',
                            type: 'pie',
                            label: {
                                show: true,
                                position: ''
                            },
                            labelLine: {
                                show: true
                            }
                        }]
                    })
                }
            },
            changeHollow(){
                let _this = this;
                _this.hollow = 1;
                SessionStorage.set(SESSION_KEY_HOLLOW_SOLID,_this.hollow);
                _this.setHollow();
            },
            changeSolid(){
                let _this = this;
                _this.hollow = 2;
                SessionStorage.set(SESSION_KEY_HOLLOW_SOLID,_this.hollow);
                _this.setHollow();
            }
        }
    }
</script>

<style scoped>
    .change-type-div{
        margin: 0 auto;
    }
</style>